<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
  <div v-if="!isLoaded">
    <v-progress-linear
      indeterminate
      color="primary darken-2"
    ></v-progress-linear>
  </div>
  <div v-else>
    <v-toolbar flat color="white">
      <v-app-bar-nav-icon @click="showDrawer()"></v-app-bar-nav-icon>
      <v-toolbar-title>Task Command</v-toolbar-title>
      <v-spacer></v-spacer>
    </v-toolbar>
    <div style="width:660px; position: absolute; left: 20px;">
    <v-form
      ref="form"
      v-model="formValid"
      @input="editItem('new')"
      lazy-validation
    ><div>
      执行命令：
    </div>
      <v-text-field
        v-model="commands"
        label="command"
        required
        :disabled="formSaving"
        class="mb-4"
      ></v-text-field>
      <div>
        任务模板：
      </div>
      <v-select
        v-model="item.template_id"
        :items="templates"
        item-value="id"
        item-text="alias"
        :rules="[v => !!v || 'Template is required']"
        required
        :disabled="formSaving"
      ></v-select>
      <div>
        执行主机：
      </div>
      <v-textarea
        v-model="hosts"
        label="hosts"
        :disabled="formSaving"
        solo
        class="mb-4"
      ></v-textarea>
    </v-form>
    <div class="my-2">
      <v-btn text large outlined @click="onTaskCreated">开始执行</v-btn>
    </div>
    </div>
  </div>
</template>

<script>
import ItemListPageBase from '@/components/ItemListPageBase';
import axios from 'axios';
import EventBus from '@/event-bus';
import ItemFormBase from '@/components/ItemFormBase';

export default {
  mixins: [ItemListPageBase, ItemFormBase],
  async created() {
    await this.loadData();
  },
  data() {
    return {
      templates: null,
      newTaskDialog: null,
      taskId: null,
      settingsSheet: null,
      filteredHeaders: [],
      commands: null,
      hosts: null,
      item: {
        id: null,
        key: null,
        environment: null,
        inventory: null,
        template_id: null,
      },
    };
  },

  computed: {
    templateAlias() {
      if (this.itemId == null || this.itemId === 'new') {
        return '';
      }
      return this.items.find((x) => x.id === this.itemId).alias;
    },

    isLoaded() {
      return this.items
        && this.templates;
    },
  },

  methods: {
    onTaskCreated() {
      this.hosts = this.hosts.replace(/\n/g, ',').replace(/\s/g, '');
      this.item.environment = JSON.stringify(
        { operate_hosts: this.hosts, commands: this.commands },
      );
      this.save().then((res) => {
        if (res != null) {
          EventBus.$emit('i-show-task', {
            taskId: res.id,
          });
        }
      });
    },

    createTask(itemId) {
      this.itemId = itemId;
      this.newTaskDialog = true;
    },

    getHeaders() {
      return [
        {
          text: '名称',
          value: 'alias',
        },
      ];
    },
    getItemsUrl() {
      return `/api/project/${this.projectId}/tasks`;
    },

    async loadData() {
      this.templates = (await axios({
        method: 'get',
        url: `/api/project/${this.projectId}/templates`,
        responseType: 'json',
      })).data;
    },

    onTableSettingsChange({ headers }) {
      this.filteredHeaders = headers;
    },
  },
};
</script>
